<style >
.typeDialog{
    border-radius: 20px!important;
    height: 340px;
    width: 470px!important;
}
</style>
<template>
    <div style="text-align: left!important;">
<!--        文章编辑的header-->
        <el-affix v-if="isEdit" :offset="0">
            <el-header class="menu">
                <el-row :gutter="20" class="back-icon">
                    <el-col :span="3">
                        <a style="font-size: 30px;font-family: 华文楷体,serif">编辑文章</a>
                    </el-col>
                    <el-col :span="1">
                        <div class="back-icon" style="cursor: pointer" @click="goBack">
                            <svg t="1625126852948" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2391" width="30" height="30"><path d="M227.211234 460.526307a70.815407 70.815407 0 0 0 0 103.357747l460.504817 438.605254a78.797491 78.797491 0 0 0 54.339568 21.387891 75.011118 75.011118 0 0 0 76.750803-73.066764 71.634083 71.634083 0 0 0-22.513569-51.167202L390.025271 511.693508l406.267582-386.824045A71.634083 71.634083 0 0 0 818.806422 73.088254 75.011118 75.011118 0 0 0 742.055619 0.02149a78.797491 78.797491 0 0 0-54.339568 21.387891z" p-id="2392"></path></svg>
                        </div>
                    </el-col>
                    <el-col :span="11" >
                        <el-input placeholder="请输入文章标题" style="width: 100%;float: left"  class="font-input" v-model="blog.title"></el-input>
                    </el-col>
                    <el-col :span="5" style="float: right">
                        <el-button @click="saveBlog(true)" class="myButton" style="border-radius: 30px;float: right;margin-left: 20px;margin-right: 60px"  >发布文章</el-button>
                        <el-button @click="saveBlog(false)" class="myButton2" style="border-radius: 30px;float: right" >保存草稿</el-button>
                    </el-col>
                    <el-col :span="1" style="float: right">
                        <div  class="back-icon" style="cursor: pointer">
                                <el-avatar class="right-item" :src="$store.state.user.avatar"></el-avatar>
                        </div>
                    </el-col>
                </el-row>
            </el-header>
        </el-affix>
<!--        文章编辑主要区域-->
        <v-md-editor
            ref="VMEditor"
            :codemirror-config="mdConfig"
            :include-level="menu_level"
            :toc-nav-position-right="false"
            :tab-size="4"
            v-model="blog.content"
            height="94vh"
            :left-toolbar="leftToolbar"
            :disabled-menus="[]"
            @upload-image="uploadImg"
        ></v-md-editor>
<!--        文章分类标签选择-->
        <el-dialog custom-class="typeDialog" width="25%"  title="文章分类标签" v-model="showDialog">
            <el-form style="margin-left: 30px" label-position="right"  label-width="80px" :model="blog">
                <el-form-item style="width: 300px" label="文章分类">
                    <el-select class="selectInput" style="width: 200px" v-model="blog.typeId" placeholder="请选择">
                        <el-option
                            v-for="item in typeList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"/>
                    </el-select>
                </el-form-item>
                <el-form-item style="width: 360px" label="我的专栏">
                    <el-select  style="float: left;width: 200px;" class="selectInput" v-model="blog.tagId" placeholder="请选择">
                        <el-option
                            v-for="item in tagList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"/>
                    </el-select>
                    <el-button v-if="!addTag" @click="addTag=true"  style="float: right;border-radius: 10px">添加</el-button>
                </el-form-item>
                <el-form-item v-if="addTag"  style="width: 360px" label="新专栏名">
                    <el-input style="float: left;width: 200px;"  class="selectInput" v-model="newTag"></el-input>
                    <el-button @click="addNewTag" style="float: right;border-radius: 10px">添加</el-button>
                </el-form-item>
                <el-form-item  :class="addTag?'button-bottom2':'button-bottom1'">
                    <el-button @click="confirmBlog" style="float: right;margin-left: 0;border-radius: 10px;margin-right: 80px" type="primary" >发布</el-button>
                    <el-button style="float: left;border-radius: 10px;margin-left: 0" @click="showDialog=false" >取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>

import {addTag, getTags, getTypes, saveBlog, uploadImage} from "@/api";
import {ElMessage} from "element-plus";

export default {
    name: "Editor",
    data(){
        return{
            addTag:false,
            blog: {
                id: -1,
                title: '',
                content: '',
                type: '',
                tag: '',
                owner: '',
                publish: '',
                banner: '',
            },
            typeList:[],
            tagList:[],
            newTag:null,
            showDialog:false,
            menu_level:[0,1,2,3,4,5,6],
            leftToolbar:'undo redo clear | h bold italic strikethrough quote ul ol table hr link image code emoji save',
            mdConfig:{
            }
        }
    },
    computed: {
        isEdit() {
            return this.$store.state.isEdit
        }
    },
    components:{

    },
    methods:{
        uploadImg(event, insertImage, files){
            // 拿到 files 之后上传到文件服务器，然后向编辑框中插入对应的内容
            var formData = new FormData();
            formData.append('image', files[0]);
            uploadImage(formData)
                .then((res) => {
                    // 此处只做示例
                    insertImage({
                        url: res.data,
                        desc: ' ',
                        // width: 'auto',
                        // height: 'auto',
                    });
                })
        },
        goBack(){
          this.$router.back();
        },
        addNewTag(){
            var that=this;
            that.addTag=false;
            if (that.newTag==null||that.newTag.trim().length===0)
                return
            addTag(that.newTag)
                .then(res=>{
                    if (res.code===200){
                        ElMessage.success({
                            message: '添加成功',
                            type: 'success'
                        });
                        that.newTag=null;
                        that.getTags();
                    }
                    else {
                        ElMessage.error('添加失败');
                    }
                })
        },
        /*保存博客*/
        saveBlog(param){
            var that=this;
            that.blog.publish=param;
            that.showDialog=true;
        },
        getTypes(){
            var that=this;
            getTypes()
            .then(res=>{
                that.typeList=res.data;
            })
        },
        getTags(){
            var that=this;
            getTags()
                .then(res=>{
                    that.tagList=res.data;
                })
        },
        confirmBlog(){
            var that=this;
            if(that.blog.title.trim()==null||that.blog.title.trim().length===0){
                ElMessage.error('请输入文章标题');
                return;
            }
            that.blog.owner=this.$store.state.user.id;
            if (that.blog.banner==null||that.blog.banner.trim().length===0)
                that.blog.banner='https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
            saveBlog(that.blog)
                .then(res=>{
                    if (res.code===200){
                        ElMessage.success({
                            message: '添加博客成功',
                            type: 'success'
                        });
                        that.$router.back();
                    }
                    else {
                        console.log(res)
                        ElMessage.error('添加失败');
                    }
                })
            .catch(err=>{
                console.log(err)
                ElMessage.error('添加失败');
            })
        }
    },
    created() {
        this.getTypes();
        this.getTags();
    },
    mounted() {
        this.$refs.VMEditor.toggleToc(true);
    },
    unmounted(){

    }
}
</script>

<style scoped>
.button-bottom1{
    width: 360px;
    margin-top: 84px
}
.button-bottom2{
    width: 360px;
    margin-top: 22px
}
.back-icon {
    position: relative;
    text-align: center;
    top: 50%;
    transform: translateY(-50%) !important;
    margin: 0 auto;
}
/*设置input*/
.el-input :deep(.el-input__inner)  {
    border-radius: 30px;
}
.selectInput :deep(.el-input__inner) {
    border-radius: 10px!important;
}
.font-input{
    font-weight: bold!important;
    font-family: 微软雅黑, serif;
    font-size: 22px;
    background: transparent!important;
}
.myButton{
    color: white;
    background-image: linear-gradient(to right, #845EC2, #FF6F91);
}
.myButton2{
    color: white;
    background-image: linear-gradient(to right, #0081CF,  #00C9A7);
}

</style>